import React,{useState} from 'react';
//react-redux 用来实现组件 和 redux 之间的通信
import { useSelector,useDispatch } from 'react-redux'; 
const Index = () => {
    const [cities] = useState(['上海','杭州','深圳','西安'])
    const city = useSelector(state=>state.city);
    const dispatch = useDispatch()
    const changeStoreCity = (val)=>{
        dispatch({
            type:"changeCity",
            val,
        })
    }
    return (
        <div>
            <p>{city}</p>
            {cities.map(item=>{
                return (
                    <div key={item}>
                        <button onClick={()=>changeStoreCity(item)}>{item}</button>
                    </div>
                )
            })}
            
        </div>
    );
}

export default Index;